  {# the base template that all modals extend #}

<div data-modal class="apos-ui apos-modal {% block modalClass %}{% endblock %}" {% block dataAttrs %}{% endblock %}>
  <div class="apos-modal-header">{#
    #}<span class="apos-modal-title" data-modal-title>
      {% block label %}{{ __ns('apostrophe', "Give Me a Label!") }}{% endblock %}
    </span>{#
    #}<div class="apos-modal-instructions" data-modal-instructions>
      {% block instructions %}{% endblock %}
    </div>{#
      This div is intended to allow JS to capture and move the controls, it should
      Not be styled, do that with your own markup when extending if needed
    #}<div class="apos-modal-controls" data-modal-controls>
      {% block controls %}{% endblock %}
    </div>{#
  #}<div class="apos-modal-filters" data-modal-filters>
      {% block filters %}
{% endblock %}
    </div>{#
#}</div>
  {# Base modals don't have breadcrumbs, but slideable modals do, extend baseSlideable.html #}
  {% block breadcrumb %}{% endblock %}
  {# This is initially just *our* data-modal-content, but later could contain many #}
  {# due to a slide transition. #}
  <div data-modal-contents class="apos-modal-contents">
    {# This is everything that slides in as part of a single sliding breadcrumb modal. #}
    {# In a non-sliding modal this extra structure is harmless, it's all scoped to the #}
    {# apos-modal-slideable class. -Tom #}
    <div data-modal-content class="apos-modal-content apos-modal-slide-current">

      <div class="apos-modal-body {% block modalBodyClass %}{% endblock %}">
        {% block body %}{{ __ns('apostrophe', "I am a Modal!") }}{% endblock %}

      </div>
      {% block footerContainer %}
        <div class="apos-modal-footer">
          {% block footer %}{% endblock %}
        </div>
      {% endblock %}
    </div>
  </div>
</div>
